<template>
  <div class="app-container">
    <div class="table-container">
      <div class="flex-center-center">
        <DatePicker
          class="flex-center-center"
          size="large" 
          type="month" 
          placeholder="月份筛选"
          v-model="timeDate"
          @on-change="changeDate"
        ></DatePicker>
        <Select 
          v-if="rolesId <= 3"
          v-model="group" 
          clearable
          filterable
          placeholder="请选择小组"
          @on-change="selectChange" 
          style="width:200px;margin-left:20px;">
          <Option 
            v-for="item in groupList" 
            :key="item.id" 
            :value="item.categoryName"
          >{{item.categoryName}}</Option>
        </Select>
      </div>
      <!-- 总体数据展示 -->
      <div class="score">
        <div>
          <p class="ItemName"></p>
          <p>本月组内KPI平均值</p>
          <span><span class="grade">{{ info.avg_score || 0 }}</span>分</span>
        </div>
        <div>
          <p class="ItemName">{{info.max_name || ''}}</p>
          <p class="sub-title">本月组内KPI最高值</p>
          <span><span class="grade">{{ info.max_score || 0 }}</span>分</span>
        </div>
        <div>
          <p class="ItemName">{{info.min_name || ''}}</p>
          <p class="sub-title">本月组内KPI最低值</p>
          <span><span class="grade">{{ info.min_score || 0 }}</span>分</span>
        </div>
        <div>
          <p class="ItemName"></p>
          <p>本月组内总物料数量</p>
          <span><span class="grade">{{ info.sum_material || 0 }}</span>个</span>
        </div>
        <div>
          <p class="ItemName">{{info.max_material_brand || ''}}</p>
          <p class="sub-title">物料数量最多品牌</p>
          <span><span class="grade">{{ info.max_brand_count || 0 }}</span>个</span>
        </div>
        <div>
          <p class="ItemName">{{info.min_material_brand || ''}}</p>
          <p class="sub-title">物料数量最少品牌</p>
          <span><span class="grade">{{ info.min_brand_count || 0 }}</span>个</span>
        </div>
      </div>
    </div>
    <div class="flex-center-center">
      <!-- 饼图 -->
      <div class="table-container materialPer">
        <p class="title">品牌物料占比<span class="unit">（单位：个）</span></p>
        <Pie
          id="pie"
          :initData="info.map_ratios"
        ></Pie>
      </div>
      <!-- 柱状图 -->
      <div class="table-container memberScore">
        <p class="title">成员分值<span class="unit">（单位：分）</span></p>
        <Bar
          id="bar"
          :initData="info.user_score"
        ></Bar>
      </div>
    </div>
  </div>
</template>

<script>
import Pie from './components/pie.vue'
import Bar from './components/bar.vue'
import { getScore, getAllCategory } from '@/api/intraClass'
import format from "date-format";
import { mapGetters } from 'vuex';
export default {
  components: {
    Pie,
    Bar
  },
  data() {
    return{
      timeDate: new Date(),
      info: {},
      // 策划权限选择的小组数据
      group: '',
      groupList: []
    }
  },
  mounted() {
    this.initData(this.timeDate)
    this.getAll()
  },
  methods: {
    changeDate() {
      this.initData(this.timeDate)
    },

    selectChange() {
      if(this.timeDate) {
        // 发请求
        this.initData(this.timeDate)
      } else {
        this.$Message.error('请选择查询时间');
      }
    },

    // 初始化页面数据
    async initData(Time) {
      const Mount = new Date(Time || '').getMonth()
      const Year = new Date(Time || '').getFullYear()
      try {
        const res = await getScore({
          startTime: format("yyyy-MM-dd", new Date(Year, Mount, 1)),
          endTime: format("yyyy-MM-dd", new Date(Year, Mount + 1, 0)),
          categoryName: this.group
        })
        this.info = res.data
      } catch(err) {
        return err
      }
    },

    // 获取全部品牌
    async getAll() {
      try {
        const result = await getAllCategory()
        this.groupList = result.data
      } catch(err) {
        return err
      }
    }
  },
  computed: {
    ...mapGetters(['rolesId'])
  }
}
</script>

<style lang="less" scoped>
  .table-container {
    padding: 30px 10px;
    .score {
      display: flex;
      margin: 50px 0 20px;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 10px;
        color: #fff;
        flex: 1;
        // height: 88px;
        border-radius: 6px;
        margin: 0 4px;
        padding-top: 6px;
        .ItemName {
          height: 24px;
          font-size: 16px;
        }
        .sub-title {
          font-size: 12px;
          color: #fff;
        }
        .grade {
          font-size: 38px;
          font-weight: 600;
        }
      }
      div:nth-child(1) {
        background-color: #d3245b;
      }
      div:nth-child(2) {
        background-color: #e8635a;
      }
      div:nth-child(3) {
        background-color: #bc3d8a;
      }
      div:nth-child(4) {
        background-color: #348550;
      }
      div:nth-child(5) {
        background-color: #1d6ec0;
      }
      div:nth-child(6) {
        background-color: #7a3a90;
      }
    } 
  }
  .materialPer {
    flex: 3;
    margin-right: 14px;
    padding: 10px;
    min-height: 350px;
  }
  .memberScore {
    flex: 7;
    min-height: 350px;
    padding: 10px;
  }
  .title {
    font-size: 16px;
    color: #000;
    .unit {
      color: #999;
    }
  }
</style>